<template>   
    <div>
        <a-drawer :title="title" placement="right" :width="width" @close="onClose" :visible="visible">
            <a-form :form="form" @submit="handleSubmit">

                <a-form-item label="学年学期" :label-col="{ span: 5 }" :wrapper-col="{ span: 12}">
                    <a-cascader :options="options" @change="yearsChange"
                        v-decorator="['schoolyear', { rules: [
                                { required: true, type: 'array', message: 'schoolyears' }
                            ] }]"
                        placeholder="Please select" />
                </a-form-item>

                <a-form-item label="类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12}">
                    <a-select defaultValue="3" @change="onChange">
                        <a-select-option value="1">上午</a-select-option>
                        <a-select-option value="2">中午</a-select-option>
                        <a-select-option value="3">下午</a-select-option>
                        <a-select-option value="4">晚自习</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="开始时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 12}">
                    <a-date-picker v-decorator="['birthday1']" style="width:100%" />
                </a-form-item>

                <a-form-item label="结束时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 12}">
                    <a-date-picker v-decorator="['birthday2']" style="width:100%" />
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" html-type="submit" icon="plus">添加</a-button>
                </a-form-item>

            </a-form>
        </a-drawer>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from "vue-property-decorator";

@Component({
    name: "sys-user-OpenDrawer",
    layout: "menu"
})
export default class OpenDrawer extends Vue {
    width: number = 600;

    form: any = {};
    type: number = 3;
    options: any[] = [
        {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                        {
                            value: 'xihu',
                            label: 'West Lake',
                        }
                    ],
                }
            ],
        }, {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'zhonghuamen',
                            label: 'Zhong Hua Men',
                        }
                    ],
                }
            ],
        }
    ];
    
    created() {
        this.$nextTick(() => {
            this.form = this.$form.createForm(this);
            if (this.title === "添加") {
                this.form.resetFields();
            }
        });
    }
    
    onChange(val) {
        console.log(val, '类型')
        this.type = val;
    }

    yearsChange(val) {
        console.log(val, '学年学期')
    }

    handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
            if (!err) {
                values.type = this.type;
                this.Submit(values);
            }
        });
    }
    @Prop({ type: String, required: false, default: "默认" }) title!: string;
    @Prop({ type: Boolean, required: true, default: false }) visible!: boolean;

    @Emit("onClose")
    onClose() {}
    @Emit("RoleChange")
    RoleChange(n: string) {}
    @Emit("Submit")
    Submit(n: object) {}
}
</script>
